<template>
  <div>
    <div id="add_friend">
      <strong style="float:left;">Send add friend message >>></strong>
      <form>
        <el-input
          type="text"
          name="friend_name"
          v-model="friend_name"
          placeholder="Friend's name..."
        ></el-input>
        <el-button type="submit" @click="add_friend()">Add</el-button>
      </form>
    </div>
    <div id="friends_message" style="margin-top:5em;">
      <h3>Friend's messages</h3>
    </div>
  </div>
</template>

<script>
  import { add_friend_query, get_user_message } from "../../api/user_message"
  export default {
    name: "FriendsMessage",
    data() {
      return {
        friend_name: "",
        user_messages: [],
      }
    },
    mounted() {
      // todo: here I can't get "send_by" user name because the schema type User @auth prevent it! Looking for dgraph development
      get_user_message()
        .then((res) => {
          console.log("res :>> ", res)
          if (res.data.errors != undefined) {
            //infer that query syntax may have something error
            res.data.errors.forEach((error) => {
              this.$message.error("get_user_message error: " + error.message)
            })
          } else {
            // this_todo is like {content: xxx, done: xxx, id: xxx}
            // this.$message.success("Add friend send successfully!")
          }
        })
        .catch((error) => {
          console.log("get_user_message error: ", error)
          this.$message.error("get_user_message error, see console")
        })
    },
    methods: {
      add_friend() {
        add_friend_query(this.friend_name)
          .then((res) => {
            console.log("res :>> ", res)
            if (res.data.errors != undefined) {
              //infer that query syntax may have something error
              res.data.errors.forEach((error) => {
                this.$message.error("add_friend_query error: " + error.message)
              })
            } else {
              // this_todo is like {content: xxx, done: xxx, id: xxx}
              this.$message.success("Add friend send successfully!")
            }
          })
          .catch((error) => {
            console.log("add friend error: ", error)
            this.$message.error("add friend error, see console")
          })
      },
    },
  }
</script>

<style scoped>
  form {
    display: flex;
  }
</style>
